<template>
  <div>
    <!-- 头部搜索S -->
    <div class="search">
      <el-card class="box-card">
        <el-form :inline="true" :model="listSerach" class="demo-form-inline">
          <el-form-item label="工单编号">
            <el-input v-model="listSerach.taskCode" type="search" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="工单状态">
            <el-select v-model="listSerach.status" placeholder="请选择">
              <el-option label="代办" value="1" />
              <el-option label="进行" value="2" />
              <el-option label="取消" value="3" />
              <el-option label="完成" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!-- 头部搜索E -->
    <div class="result">
      <el-card class="box-card">
        <!-- 新建按钮 -->
        <div class="add">
          <!-- el-icon-loading
          el-icon-circle-plus-outline -->
          <el-button class="addnew" type="primary" icon="el-icon-circle-plus-outline" @click="dialogVisible=true">新建</el-button>
          <el-button class="change" type="success" @click="dialogShow=true">工单配置</el-button>
        </div>
        <!-- 表格 -->
        <div class="text item">
          <template>
            <el-table
              :data="currentPage"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                width="80"
              />
              <el-table-column
                prop="taskCode"
                label="工单编号"
                width="180"
              />
              <el-table-column
                prop="innerCode"
                label="设备类型"
              />
              <el-table-column
                prop="taskType.typeName"
                label="工单类型"
              />
              <el-table-column
                prop="createType"
                label="工单方式"
              >
                <template #default="scope">
                  {{ hireMap[scope.row.createType] }}
                </template>
              </el-table-column>
              <el-table-column
                prop="taskStatusTypeEntity.statusName"
                label="工单状态"
              />
              <el-table-column
                prop="userName"
                label="运营人员"
              />
              <el-table-column
                prop="createTime"
                label="创建日期"
              >
                <template #default="scope">
                  {{ formatDate(scope.row.createTime) }}
                </template></el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click.native.prevent="deleteRow(scope.row.taskId)"
                  >
                    查看详细
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 分页 -->
          <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <el-pagination
              :current-page="listSerach.pageIndex"
              :page-size="listSerach.pageSize"
              :total="totalCount"
              layout="total, prev, pager, next"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
        <div class="con" />
      </el-card>
    </div>
    <!-- <comlist :visible="dialogVisible" /> -->
    <!-- dialog form 表单 -->
    <el-dialog
      title="新增工单"
      color="black"
      :visible.sync="dialogVisible"
      width="30%"
      center
      :before-close="handleClose"
    >
      <el-form ref="form" :rules="addRules" :model="form" label-width="80px">
        <el-form-item prop="innerCode" style="width:95%" label="设备编号:">
          <el-input v-model="form.innerCode" maxlength="15" show-word-limit @blur="getOperatorList" />
        </el-form-item>
        <el-form-item label="工单类型:">
          <el-select v-model="form.productType" style="width:95%" placeholder="请选择">
            <div v-for="(item,index) in ListType" :key="index">
              <el-option :label="item.typeName" :value="item.typeId" />
            </div>

          </el-select>
        </el-form-item>
        <el-form-item style="width:95%" label="补货数量:">
          <span style="color:blue" @click="showGoodsList"><i class="el-icon-s-order" />补货清单</span>
        </el-form-item>
        <el-form-item label="运营人员:">
          <el-select v-model="form.userId" style="width:95%" placeholder="请先填写设备编号">
            <div v-for="(item, index) in people" :key="index">
              <el-option :label="item.userName" :value="item.userId" />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="form.desc" maxlength="40" show-word-limit style="width:95%" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 补货清单dialog -->
    <!-- 自动补货清单阙值 -->
    <el-dialog
      title="工单配置"
      :visible="dialogShow"
      width="30%"
      :before-close="handleCloseb"
    >
      <el-input-number v-model="num" style="width:95%" controls-position="right" :min="1" :max="100" @change="handleChange" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="ChangeAuto">确 定</el-button>
      </span>
    </el-dialog>
    <!--补货详情表  -->
    <el-dialog
      title="补货详情"
      :visible="dialogShowGoods"
      width="40%"
      height="600"
      :before-close="CloseGoodList"
    >
      <el-table
        height="250"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="channelCode"
          label="货道编号"
          width="120"
        />
        <el-table-column
          prop="sku.skuName"
          label="商品名称"
          width="120"
        />
        <el-table-column
          prop="currentCapacity"
          label="当前数量"
          width="120"
        />
        <el-table-column
          prop=""
          label="还可添加"
          width="120"
        >
          <template #default="{row}">
            {{ row.maxCapacity-row.currentCapacity }}
          </template>
        </el-table-column>
        <el-table-column
          prop="maxCapacity"
          label="补满数量"
          width="180"
        >
          <template #default="scope">
            <el-input-number v-if="scope.row.sku" v-model="Goodnum[scope.$index]" controls-position="right" :min="0" :max="scope.row.maxCapacity" label="描述文字" @change="handleChange(scope.row,scope.$index)" />
            <p v-else>暂无数据</p>
          </template>
        </el-table-column>
      </el-table>
      <span class="dialog-footer">
        <el-button @click="dialogShowGoods = false">取 消</el-button>
        <el-button type="primary" @click="subtoForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情清单 -->
    <el-dialog
      title="工单详情"
      :visible="taskShow"
      width="40%"
      :before-close="taskclose"
    >
      <div>
        <h3 style="text-align: center;">{{ detailListType }}</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <p>设备编号:{{ detailsList.innerCode }}</p>
            <p>完成日期：{{ detailsList.updateTime }}</p>
            <p>工单类型：{{ typeName }}</p>
            <p>工单方式：手动</p>
          </el-col>
          <el-col :span="12">
            <p>创建日期：{{ detailsList.createTime }}</p>
            <p>运营人员：{{ detailsList.userName }}</p>
            <p>补货数量：<span style="color:blue" @click="opentaskShowQ">补货详情</span></p>
            <p>创建日期：{{ detailsList.desc }}</p>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- 详情清单中的补货信息 -->
    <el-dialog
      title="工单详情"
      :visible="taskShowQ"
      width="40%"
      :before-close="taskShowQclose"
    >
      <el-table
        :data="taskDetailsList"
        style="width: 100%"
      >
        <el-table-column
          prop="channelCode"
          label="货道信息"
          width="180"
        />
        <el-table-column
          prop="skuName"
          label="商品"
          width="180"
        />
        <el-table-column
          prop="expectCapacity"
          label="补货数量"
        />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import dayjs from 'dayjs'

// import comlist from './components/comlist.vue'
import { taskDetailsAPI, taskInfoAPI, getListType, channelList, TaskSearchApi, supplyAlertValue, autoSupplyConfig, operatorList, createlList } from '@/api'
export default {
  components: {
    // comlist
  },
  data() {
    return {
      // taskDetails
      taskDetailsList: [],
      // taskId
      taskId: '',
      // 详情清单中的补货信息
      taskShowQ: false,
      typeName: '',
      // 返回类型
      detailListType: '',
      // 工单详情页面
      detailsList: {},
      // 详情页面显影
      taskShow: false,
      // 运营人员
      people: [

      ],
      // 新增表单
      form: {
        // 设备编号
        innerCode: '01000025',
        // 创建类型
        createType: 1,
        // 执行人id
        userId: 1,
        // 工单类型
        assignorId: 8,
        productType: 2,
        // 描述信息
        desc: '',
        // 补货信息(补货工单才有)
        details: {

        }
        //
        //
        //
      },
      // 请求回来的数据

      currentPage: [],
      // 总数据数量totalCount
      totalCount: null,
      //
      hireMap: {
        1: '手动',
        2: '自动'
      },
      // 表单显隐藏
      dialogVisible: false,
      // 阙值表单显影
      dialogShow: false,
      // 补货清单详情
      dialogShowGoods: false,
      // 阙值
      num: 0,
      // 表单搜索条件
      listSerach: {
        // 搜索提交的表单
        innerCode: '',
        taskCode: '',
        status: '',
        pageIndex: 1,
        pageSize: 10,
        isRepair: false
      },

      // 订单类型
      ListType: [],
      // 表单验证
      addRules: {
        innerCode: [
          { required: false, message: '机器编号不能为空', trigger: ['blur', 'change'] }
          // { min: 8, max: 8, message: '机器编号不能为空', trigger: ['blur', 'change'] }
        ]
      },
      // 补货详情
      Goodnum: {},
      // 补货详情请求返回
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  async created() {
    const res1 = await getListType()
    this.ListType = res1
    this.geTop()
    const res = await TaskSearchApi(this.listSerach)
    const res2 = await res.totalCount - 0
    this.totalCount = res2
    // 信息表信息
    this.currentPage = res.currentPageRecords
  },
  methods: {
    // 打开补货清单详情
    async opentaskShowQ() {
      this.taskShowQ = true
      const res = await taskDetailsAPI(this.taskId)
      this.taskDetailsList = res
      console.log(res)
    },
    // 显示货品清单
    async showGoodsList() {
      console.log('显示货品清单')
      // 发起请求 从form中获取运营人员的code 返回补货详情 并赋值给tableData
      const res = await channelList(this.form.innerCode)
      // 将tableDate中 要作为新建工单的部分必传参数遍历出来
      this.tableData = res
      this.getdetails(res)
      this.toform(this.tableData)
      this.dialogShowGoods = true
    },
    // 向tableDate中添加一个新的键值对expectCapacity 来存储补货数量
    getdetails(GoodsArr) {
      console.log(123123123)
      const res = GoodsArr.map((item) => {
        item['expectCapacity'] = item.maxCapacity
        return item
      })
      this.tableData = res
    },
    // 以下方法 创建一个新的提交对象
    toform(GoodsArr) {
      console.log('star')
      const res = GoodsArr.map((item) => {
        const obj = {}
        if (item.sku) {
          obj['channelCode'] = item.channelCode
          obj['expectCapacity'] = item.maxCapacity
          obj['skuId'] = item.skuId
          obj['skuName'] = item.sku.skuName
          obj['skuImage'] = item.sku.skuImage
          // console.log('商品名称' + item.sku.skuName + '||' + '图片' + item.sku.skuImage)
        }
        if (item.sku) { return obj }
      })
      const res1 = res.filter(item => item !== undefined)
      this.Goodnum = res1
      console.log(res1)
      console.log('end')
    },
    // 将Goodnu补货表传递到form 表单准备发起新建工单请求
    subtoForm() {
      this.form.details = this.Goodnum
      this.dialogShowGoods = false
      console.log(this.form)
    },
    formatDate(value) {
      return dayjs(value).format('YYYY.MM.DD HH:mm:ss')
    },
    async onSubmit() {
      this.listSerach.pageIndex = 1
      const res = await TaskSearchApi(this.listSerach)
      this.currentPage = res.currentPageRecords
    },
    // 关闭框中框
    taskShowQclose() {
      this.taskShowQ = false
    },
    // 查看详情
    async deleteRow(val) {
      this.taskId = val
      const res = await taskInfoAPI(val)
      this.detailsList = res
      this.detailListType = res.taskStatusTypeEntity.statusName
      this.typeName = res.taskType.typeName
      console.log(this.detailListType)
      console.log(this.detailsList)
      setTimeout(() => {
        this.taskShow = true
      }, 0)
      return this.$message({
        showClose: true,
        message: '查看详情,我还没写捏',
        type: 'error'
      })
    },
    taskclose() {
      console.log('wqdq')
      this.taskShow = false
    },
    // 新建工单
    async addSubmit() {
      console.log(this.form)
      const res = await createlList(this.form)
      console.log(res)
      this.$message.success('添加成功')
    },
    // 表单序列
    indexMethod(index) {
      return index * 1 + 1
    },
    // 表单关闭之后触发
    handleClose(done) {
      this.$confirm('放弃当前填写,确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 阙值表单关闭
    handleCloseb(done) {
      this.$confirm('放弃当前填写,确认关闭？')
        .then(_ => {
          this.dialogShow = false
          done()
        })
        .catch(_ => {})
    },
    // 阙值表单改动
    handleChange(val, index) {
    },
    // 获取阙值
    async geTop() {
      const res = await supplyAlertValue()
      this.num = res
      console.log(res)
    },
    // 修改自动补货阙值
    async ChangeAuto() {
      console.log(this.num)
      const res = await autoSupplyConfig(this.num)
      this.dialogShow = false
      if (res) { this.$message.success('修改自动补货阙值成功') }
      // await this.geTop()
    },
    // 得到啊运营人员列表
    async getOperatorList() {
      const res = await operatorList(this.form.innerCode)
      this.people = res
      console.log(res)
    },
    // 分页
    async   handleCurrentChange(val) {
      console.log(val)
      this.listSerach.pageIndex = val
      const res = await TaskSearchApi(this.listSerach)
      this.currentPage = res.currentPageRecords
      // this.totalCount = res.totalPage - 0
    },
    // 关闭补货详情
    CloseGoodList() {
      this.dialogShowGoods = false
      console.log('关闭补货详情')
    }
  }
}

</script>

<style >
.rigth{
  text-align: right;
}
 .text {
    font-size: 12px;
    padding-bottom: 10px;
  }

  .item {
    /* padding: 5px 0; */
    padding: 0;
  }
  .box-card {
    width:95%;
    margin:10px 20px;
    padding: 0 !important;
}

  .el-card__body:nth-child(1){
    background-color: rgb(255, 255, 255);
    padding-bottom: 0;
  }
.add{
  margin-bottom: 20px;
}
.addnew{
 background-image: linear-gradient(to bottom left, red , rgb(255, 149, 0));
 border:none ;
}
.change{
background-color: #fbf4f0;
border:none ;
color: black;
}
.el-table__header-wrapper{
background-color: rgb(96, 96, 96);
}
.el-table{
  padding-bottom: 30px !important;
}
h3{
  text-align: center;
}
</style>
